<template>
    <div ref="sketch-content" class="board-content">
        <a-row :gutter="[24, 24]">
            <a-col :span="14">
                <a-card :body-style="{ height: '80%' }" class="board-card" :bordered="false">
                    <template #title>
                        <div class="todo-title">
                            <span class="title-content">{{ t('TodoTitle') }}</span>
                            <span class="describe-content">{{ t('TodoDescride') }}</span>
                        </div>
                    </template>
                    <div class="todo-wrapper">
                        <describeWithIcon
                            v-for="(item, index) in todoList"
                            :key="index"
                            class="todo-item"
                            :describe-item="item"
                            @click="params => handleRedirectTo(params.to)"
                        />
                    </div>
                </a-card>
            </a-col>
            <a-col :span="10">
                <a-card :body-style="{ height: '80%' }" class="board-card myBoard" :bordered="false">
                    <template #title>
                        <div class="todo-title">
                            <span class="title-content">{{ t('MyBoardTitle') }}</span>
                        </div>
                    </template>
                    <div
                        v-for="(item, index) in boardList"
                        :key="index"
                        class="list-item"
                        @click="handleRedirectTo(item.to)"
                    >
                        <span class="title">
                            {{ item.title }}
                        </span>
                        <span class="number">{{ item.count }}</span>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
    import { reactive } from 'vue'
    import { useRouter,useRoute } from 'vue-router'
    import { getTodoIndex } from '@/apis/sys/process'
    import { useI18n } from 'vue-i18n'
    import { $handleRedirect } from '@/utils/index'
    import { $getPublishedApplicationId } from '@/utils/common'
    import describeWithIcon from './components/describeWithIcon.vue'
    const PUBLIC_PATH = import.meta.env.VITE_PUBLIC_PATH
    export default {
        name: 'PublishIndex',
        components: { describeWithIcon },
        setup() {
            const { t } = useI18n()
            let router = useRouter()
            const route = useRoute()
            const todoList = reactive<ProcessTodeItem[]>([
                {
                    // 待办事项区列表，后续相关事项条数需要接口支持
                    count: 0,
                    describe: t('TodoAll'),
                    type: 'todo',
                    key: 'todoCount',
                    to: `${PUBLIC_PATH}/process`
                },
                {
                    count: 0,
                    describe: t('TodoTimeOut'),
                    type: 'timeout',
                    to: `${PUBLIC_PATH}/process`
                },
                {
                    count: 0,
                    describe: t('TodoReminder'),
                    type: 'hard',
                    key: 'urgeCount',
                    to: `${PUBLIC_PATH}/process`
                }
            ])
            const boardList = reactive<ProcessBoardItem[]>([
                // 功能列表，后续相关事项条数需要接口支持
                {
                    title: t('MyBoardMyProcess'),
                    count: 0,
                    type: 'myProcess',
                    key: 'createCount',
                    icon: 'container',
                    to: `${PUBLIC_PATH}/process?type=1`
                },
                {
                    title: t('MyBoardToMe'),
                    count: 0,
                    type: 'ccToMe',
                    key: 'ccCount',
                    icon: 'mail',
                    to: `${PUBLIC_PATH}/process?type=3`
                },
                {
                    title: t('MyBoardDone'),
                    count: 0,
                    type: 'done',
                    key: 'doneCount',
                    icon: 'safety-certificate',
                    to: `${PUBLIC_PATH}/process?type=2`
                }
            ])
            const applicationId = $getPublishedApplicationId()
            // 获取代办事项和工作事项数据
            getTodoIndex({ applicationId }).then(res => {
                initTodoValue(res)
            })
            // 表单列表
            function initTodoValue(info) {
                // 设置催办、待办数量
                todoList.forEach(item => {
                    item.key && (item.count = info[item.key] || 0)
                })
                // 设置我发起的、抄送、已办数量
                boardList.forEach(item => {
                    item.key && (item.count = info[item.key] || 0)
                })
            }
            // 拼接applicationId，进行路由跳转
            const handleRedirectTo = path => {
                let realPath = path
                if (route?.meta?.layoutPlanId) {
                  realPath = `${realPath}${realPath.indexOf('?') > -1 ? '&' : '?'}layoutPlanId=${
                      route.meta.layoutPlanId
                  }`
                }
                $handleRedirect(`${realPath}`, router)
            }
            return {
                todoList,
                boardList,
                handleRedirectTo,
                t
            }
        }
    }
</script>

<style lang="less" scoped>
    @header-height: 90px;
    .boxShadow(@blur: 4px) {
        box-shadow: 0 0 @blur 0 #e1e4ed;
        border-radius: 4px;
    }

    .board-content {
        height: 100%;
        width: 100%;
        padding: 20px;
        background: #fff;

        .todo-title {
            .title-content {
                font-size: 16px;
            }

            .describe-content {
                margin-left: 2em;
                font-size: 13px;
                color: #bfbfbf;
            }
        }

        :deep(.myBoard .@{ant-prefix}-card-body) {
            display: flex;
            justify-content: space-between;
        }

        .board-card {
            .boxShadow();
            height: 240px;

            &:hover {
                .boxShadow(12px);
            }
        }

        .todo-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 100%;

            .todo-item {
                cursor: pointer;
                height: 100%;
                width: 30%;
                border-radius: 8px;

                &:first-child {
                    background: url('@/assets/images/home-daiban.png') no-repeat center center / cover;
                }

                &:nth-child(2) {
                    background: url('@/assets/images/home-chaoshi.png') no-repeat center center / cover;
                }

                &:nth-child(3) {
                    background: url('@/assets/images/home-chuiban.png') no-repeat center center / cover;
                }
            }
        }

        .list-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
            font-size: 16px;
            text-align: center;
            margin: 20px 0;
            padding: 5px 0;

            &:not(&:nth-child(1)) {
                border-left: 1px solid #e1e4ed;
            }

            .number {
                font-weight: bold;
                font-size: 40px;
                color: #4a68e4;
                letter-spacing: 0;
                text-align: center;
            }
        }
    }
</style>

<i18n lang="yaml">
zh-CN:
    TodoTitle: 待办事项
    TodoDescride: 及时处理待办事项，让审批流程更高效！
    TodoAll: 全部待办
    TodoTimeOut: 超时
    TodoReminder: 催办
    MyBoardTitle: 工作事项
    MyBoardMyProcess: 我发起的
    MyBoardToMe: 抄送我的
    MyBoardDone: 已办事项
en-US:
    TodoTitle: To do list
    TodoDescride: Handle to-do items in time to make the approval process more efficient!
    TodoAll: All to do
    TodoTimeOut: overtime
    TodoReminder: Urge
    MyBoardTitle: Work items
    MyBoardMyProcess: I initiated it
    MyBoardToMe: Copy to me
    MyBoardDone: Done items
</i18n>
